<template>
  <div class="edit-gen-container">
    <!-- <el-steps :active="step" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基础信息"></el-step>
      <el-step title="字段信息"></el-step>
      <el-step title="其他"></el-step>
    </el-steps>-->

    <el-tabs v-model="step">
      <el-tab-pane label="基础信息" name="1">
        <div class="base">
          <el-form ref="form" :model="gen" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="业务表名称" disabled prop="tableName">
                  <el-input v-model="gen.tableName" disabled size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务表描述" prop="tableComment">
                  <el-input v-model="gen.tableComment" disabled size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实体名称" prop="className">
                  <el-input v-model="gen.className" disabled size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="字段信息" name="2">
        <div class="column">
          <el-table height="100%" :data="gen.genColumns" border>
            <el-table-column prop="id" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="columnName" label="字段列名" align="center">
              <template v-slot="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.columnName"
                  placement="top-start"
                >
                  <span class="text">{{scope.row.columnName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="columnComment" label="字段描述" align="center">
              <template v-slot="scope">
                <el-input v-model="scope.row.columnComment" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="columnType" label="字段类型" align="center"></el-table-column>
            <el-table-column prop="javaProperty" label="java属性" align="center">
              <template v-slot="scope">
                <el-input v-model="scope.row.javaProperty" size="small"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="javaType" label="java类型" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.javaType" placeholder="请选择java类型" size="small">
                  <el-option v-for="item in types" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="生成信息" name="3">
        <div class="other">
          <el-form ref="form" :model="gen" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="生成包路径" prop="packageName">
                  <el-input v-model="gen.packageName" size="mini" placeholder="请输入生成包路径"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成模块名" prop="module">
                  <el-input v-model="gen.module" size="mini" placeholder="请输入生成模块名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生成业务名" prop="bizName">
                  <el-input v-model="gen.bizName" size="mini" placeholder="请输入生成业务名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="作者" prop="author">
                  <el-input v-model="gen.author" size="mini" placeholder="请输入作者"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="btn">
      <el-button type="primary" size="small" @click="handleSubmit">提交</el-button>
      <el-button type="primary" size="small" @click="handleReturn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { selectTableInfoById, updateGenTable } from "@/api/gen";
export default {
  data() {
    return {
      step: "1",
      gen: {},
      rules: {
        packageName: [
          { required: true, message: "包路径不能为空", trigger: "blur" }
        ],
        module: [
          { required: true, message: "业务模块不能为空", trigger: "blur" }
        ],
        bizName: [
          { required: true, message: "业务名称不能为空", trigger: "blur" }
        ],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }]
      },
      types: [
        "Long",
        "String",
        "Integer",
        "Double",
        "BigDecimal",
        "Boolean",
        "Date"
      ]
    };
  },
  created() {
    this.selectTableInfoById();
  },
  methods: {
    async selectTableInfoById() {
      const { data } = await selectTableInfoById({ id: this.$route.params.id });
      this.gen = data;
    },
    handleReturn() {
      this.$router.back();
    },
    handleSubmit() {
      this.$confirm("是否完成基础信息，字段信息以及生成信息的修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$refs["form"].validate(async valid => {
            if (valid) {
              await updateGenTable(this.gen);
            } else {
              this.$message({
                type: "warning",
                message: "你还有未填数据，请检查"
              });
              return false;
            }

            this.selectTableInfoById();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-gen {
  &-container {
    background-color: #fff;
    height: 100%;
    margin: 30px;
    padding: 10px;

    .column {
      height: 400px;
    }

    .text {
      white-space: nowrap;
    }
    .btn {
      text-align: center;
      margin: 10px 0px 20px;
    }
  }

  & {
    margin: 30px 0px 20px;
    padding: 10px;
  }
}
</style>